<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>系统配置</title>
    <script th:replace="common/head::static"></script>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <!--<div class="layui-card-header">
            颜色选择器 - layui.colorpicker
        </div>-->
        <div class="layui-card-body">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">系统名字：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sysName" th:value="${sysConfigVo.sysName}" lay-verify="required"
                               placeholder="请输入系统名字" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">系统logo：</label>
                    <div class="layui-input-inline">
                        <input id="sysLogo" type="text" name="sysLogo" th:value="${sysConfigVo.sysLogo}"
                               class="layui-input">
                    </div>
                    <div class="layui-input-inline layui-btn-container" style="width: auto;">
                        <button id="sysLogoUpload" type="button" class="layui-btn">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <button id="sysLogoUploadPreview" class="layui-btn layui-btn-primary">查看图片</button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">系统颜色：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sysColor" th:value="${sysConfigVo.sysColor}" placeholder="请选择颜色"
                               class="layui-input" id="sysColor">
                    </div>
                    <div class="layui-inline" style="left: -11px;">
                        <div id="orioleColorpicker"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">底部信息：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sysBottomText" th:value="${sysConfigVo.sysBottomText}"
                               lay-verify="required" placeholder="请输入底部信息" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">首页地址：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sysIndex" th:value="${sysConfigVo.sysIndex}" lay-verify="required"
                               placeholder="请输入首页地址" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="sysConfigUpdateFilter">修改
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script th:src="@{/common/js/common.js}"></script>
<script th:inline="javascript">

    let sysColor = [[${sysConfigVo.sysColor}]];
    let sysIndex = [[${sysConfigVo.sysIndex}]];

    layui.use(['colorpicker', 'form', 'upload'], function () {
        const $ = layui.$
            , form = layui.form
            , colorpicker = layui.colorpicker
            , upload = layui.upload;

        form.render();

        Common.simpleUpload(upload, '#sysLogoUpload', '/sysFile/upload/', 'post', function (res) {
            if (res.value === 200) {
                $('#sysLogo').val(res.data.url);
            } else {
                layer.msg(res.message, {icon: 5});
            }
        });

        Common.colorpicker(colorpicker, '#orioleColorpicker', sysColor, 'rgb', true, false, [], 'sm'
            , function (color) {
                parent.$('.layui-header, .layui-side, .layui-nav').css('background-color', color);
            }
            , function (color) {
                $('#sysColor').val(color);
            }
        );

        form.on('submit(sysConfigUpdateFilter)', function (obj) {
            Common.ajaxPutJSON(ctx + "/sysConfig/update", JSON.stringify(obj.field), function (res){
                console.log(res);
                if (res.value === 200) {
                    layer.msg(res.message, {icon: 1, time: 1000}, function () {
                        if (window !== top || (self.frameElement && self.frameElement.tagName === "IFRAME")) {
                            top.location.href = ctx + sysIndex;
                        } else {
                            window.location.href = ctx + sysIndex;
                        }
                    });
                } else {
                    layer.msg(res.message, {icon: 2, time: 2000});
                }
            })
            return false;
        });

    });

</script>
</body>
</html>